import React, { useEffect, useState } from "react";
import { Card, Col, Row, Table } from 'antd';
import *as Icon from '@ant-design/icons';
import * as echarts from 'echarts';
import './home.css'
import { getData } from '../../api/index'
import Myecharts from '../../components/Echarts/index'
const iconToElement = (name) => React.createElement(Icon[name])
const Home = () => {
    //dom首次渲染完成
    useEffect(() => {
        // getData().then(()=>{

        // })
      // settableData(dataSource);//
     
      setchartData(
       {
        order:{
            xData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            series:[
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        },
        user:{
            xData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
        },
        video:{
            series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
        }
       }
      )  
    },[])
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖1',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            key: '3',
            name: '胡彦斌2',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '4',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            key: '5',
            name: '胡彦斌3',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '6',
            name: '胡彦祖4',
            age: 42,
            address: '西湖区湖底公园1号',
        }
    ];
    const orderData = [
        {
            "name": "今日支付订单",
            "value": 1234,
            "icon": "HomeOutlined",
            "color": "#66C5C8"
        },
        {
            "name": "今日收藏订单",
            "value": 3421,
            "icon": "HomeOutlined",
            "color": "#ffb988"
        },
        {
            "name": "今日未支付订单",
            "value": 1234,
            "icon": "ShoppingOutlined",
            "color": "#74AFEA"
        },
        {
            "name": "本月支付订单",
            "value": 1234,
            "icon": "UserOutlined",
            "color": "#66C5C8"
        },
        {
            "name": "本月收数订单",
            "value": 3421,
            "icon": "FileOutlined",
            "color": "#ffb988"
        },
        {
            "name": "本月未支付订单",
            "value": 1234,
            "icon": "FileOutlined",
            "color": "#74AFEA"
        }

    ]
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];
 
    const [tableData, settableData] = useState([])
    const [chartData, setchartData] = useState([])
    return (
        <div>
            <Row className="home">
                <Col span={8}>
                    <Card hoverable >
                        <div className="user">
                            <img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                            <div className="userinfo">
                                <p className="name">Admin</p>
                                <p className="account">超级管理员</p>
                            </div>
                        </div>
                        <div className="login-info">
                            <p>上次登录时间<span>2024-11-12</span> </p>
                            <p>上次登录地点<span>2024-11-11</span> </p>
                        </div>
                    </Card>
                    <Card>
                        <Table rowKey={'name'} dataSource={dataSource} columns={columns} pagination={false} />
                    </Card>
                </Col>
                <Col span={16}>
                    <div className="num">
                        {
                            orderData.map((item, index) => {
                                return (
                                    <Card key={index} >
                                        <div className="icon-box" style={{ background: item.color }}>
                                            {iconToElement(item.icon)}
                                        </div>
                                        <div className="detail">
                                            <p className="num">￥{item.value}</p>
                                            <p className="txt">{item.name}</p>
                                        </div>
                                    </Card>
                                )
                            })
                        }
                    </div>
                    {chartData.order&& <Myecharts chartData={chartData.order} style={{height:'300px'}} />}
                   <div className="graph">
                  
                     {chartData.user&& <Myecharts chartData={chartData.user} style={{height:'250px',width:"50%"}} />}
                     {chartData.video&& <Myecharts chartData={chartData.video}  isAxisChart={false} style={{height:'250px',width:"50%"}} />}

                     
                  </div>
                </Col>
            </Row>
        </div>
    )
}
export default Home